<template>
  <div id="countDown_box">
    <countdown :deadline="deadline" :labels="labels" :start_callback="countDownStart()" :end_callback="countDownEnd()" />
  </div>
</template>

<script>
import Countdown from 'vue2-flip-countdown';
export default {
  components: {
    Countdown
  },
  props: {
    deadline: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      labels: {
        days: '天',
        hours: '时',
        minutes: '分',
        seconds: '秒'
      }
    };
  },
  methods: {
    // 倒计时开始回调
    countDownStart() {
      this.$emit('countDownStart');
    },
    // 倒计时结束回调
    countDownEnd() {
      this.$emit('countDownEnd');
    }
  }
};
</script>

<style>
#countDown_box .flip-card__bottom,
#countDown_box .flip-card__back-bottom,
#countDown_box .flip-card__bottom-4digits,
#countDown_box .flip-card__back-bottom-4digits,
#countDown_box .flip-card__bottom,
#countDown_box .flip-card__back-bottom,
#countDown_box .flip-card__bottom-4digits,
#countDown_box .flip-card__back-bottom-4digits,
#countDown_box .flip-card__top,
#countDown_box .flip-card__bottom,
#countDown_box .flip-card__back-bottom,
#countDown_box .flip-card__back::before,
#countDown_box .flip-card__back::after {
  background-color: #31456c;
  color: #fff;
  border-color: #fff;
  font-family: 'number_count';
}
#countDown_box .flip-clock__card::after,
#countDown_box .flip-clock__card::before {
  position: absolute;
  z-index: 10;
  content: '';
  height: 10px;
  width: 10px;
  background-color: #fff;
  border-radius: 10px;
  /* border-bottom-right-radius: ; */
}
#countDown_box .flip-clock__card::after {
  top: 30px;
  right: -5px;
}
#countDown_box .flip-clock__card::before {
  top: 30px;
  left: -5px;
}

#countDown_box .flip-clock__slot {
  color: #E02020;
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  padding-top: 10px;
}
</style>
